<template>
  <div class="app-container">
    <h2>订单管理</h2>
    <p>这里是订单管理页面</p>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单列表</span>
        <el-button style="float: right; padding: 3px 0" type="text">导出订单</el-button>
      </div>
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="120"></el-table-column>
        <el-table-column prop="chargingPile" label="充电桩" width="120"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
        <el-table-column prop="amount" label="金额(元)" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="handleCancel(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "OrderManagement",
  data() {
    return {
      orderList: [
        {
          orderNo: 'ORD20240320001',
          userName: '张三',
          chargingPile: 'CP001',
          startTime: '2024-03-20 10:00:00',
          endTime: '2024-03-20 11:30:00',
          amount: '45.00',
          status: '已完成'
        },
        {
          orderNo: 'ORD20240320002',
          userName: '李四',
          chargingPile: 'CP002',
          startTime: '2024-03-20 11:00:00',
          endTime: '2024-03-20 12:00:00',
          amount: '30.00',
          status: '进行中'
        },
        {
          orderNo: 'ORD20240320003',
          userName: '王五',
          chargingPile: 'CP003',
          startTime: '2024-03-20 13:00:00',
          endTime: '2024-03-20 14:00:00',
          amount: '30.00',
          status: '已取消'
        }
      ]
    }
  },
  methods: {
    getStatusType(status) {
      const statusMap = {
        '已完成': 'success',
        '进行中': 'primary',
        '已取消': 'info'
      }
      return statusMap[status] || 'info'
    },
    handleDetail(row) {
      this.$message.info('查看订单详情：' + row.orderNo)
    },
    handleCancel(row) {
      this.$message.warning('取消订单：' + row.orderNo)
    }
  }
}
</script> 